<template>
	<view class="container">
		<!-- 初始加载动画 -->
		<view v-if="initialLoading" class="initial-loading">
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 有评价数据时显示评价列表 -->
		<view v-else-if="evaluateList.length > 0">
			<!-- 根据数据进行循环输出板块 -->
			<view class="info" v-for="item in evaluateList" :key="item.id">
				<view class="up">
					<span>{{item.userName}}</span>
					<view class="info-btn" @click="goInfo(item.id)">
						查看详情
					</view>
				</view>
				<view class="info-list">
					<view class="list one">
						<span>订单编号:</span>
						<span>{{item.orderNumber}}</span>
					</view>
					<view class="list two">
						<span>综合评分:</span>
						<span>{{item.grade}}分
							<view class="starts" v-for="star in item.grade" :key="star">
								<image src="/static/evaluate-management/五星 拷贝 3.png" mode=""></image>
							</view>
						</span>
					</view>
					<view class="list three">
						<span>评价时间:</span>
						<span>{{item.evaluateTime}}</span>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 无评价数据时的空状态显示 -->
		<view v-else class="empty-state">
			<text class="empty-text">暂时没有评价记录！</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				evaluateList: [], // 评价列表数组
				initialLoading: true // 是否正在初始加载
			}
		},
		
		// 页面加载时执行
		onLoad() {
			// 初始化加载评价列表
			this.getEvaluateList();
		},
		
		methods: {
			// 获取评价列表数据（使用假数据模拟）
			getEvaluateList() {
				// 模拟网络请求延迟
				setTimeout(() => {
					// 生成假数据
					this.evaluateList = this.generateMockData();
					this.initialLoading = false;
				}, 1000);
			},
			
			// 生成模拟数据
			generateMockData() {
				const mockEvaluates = [
					{
						id: 'eval_001',
						userName: '张先生',
						orderNumber: 'ORD202401150001',
						grade: 5,
						evaluateTime: '2024.01.15 14:30'
					},
					{
						id: 'eval_002', 
						userName: '李女士',
						orderNumber: 'ORD202401150002',
						grade: 4,
						evaluateTime: '2024.01.15 16:45'
					},
					{
						id: 'eval_003',
						userName: '王先生',
						orderNumber: 'ORD202401150003', 
						grade: 5,
						evaluateTime: '2024.01.15 18:20'
					}
				];
				
				return mockEvaluates;
			},
			
			// 查看详情按钮点击事件
			goInfo(evaluateId) {
				console.log('查看评价详情，评价ID:', evaluateId);
				
				// 跳转到评价详情页面，传递评价ID参数
				uni.navigateTo({
					url: `/evaluate-management/evaluate-detail?id=${evaluateId}`,
					success: () => {
						console.log('跳转到评价详情页面成功');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						// 如果页面不存在，可以显示提示信息
						uni.showToast({
							title: '页面暂未开发',
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		background: linear-gradient(to bottom, #3284fc 50%, #f5f5f5 50%);
		min-height: 40vh;
		max-height: 40vh;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.info {
		margin-top: 30rpx;
		background: #ffffff;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		padding: 0 20rpx;
	}
	.up{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 10rpx;
		border-bottom: 8rpx solid #f4f4f4;
	}
	.up span{
		font-size: 30rpx;
		font-weight: bold;
	}
	.info-btn{
		background: #0863e7;
		color: #ffffff;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		font-size: 30rpx;
	}
	.info-list{
		padding: 20rpx 10rpx;
	}
	.info-list span:last-child{
		padding-left: 15rpx;
		
	}
	.list{
		padding: 5rpx 0;
	}
	.one span{
		color: #458bf9;
	}
	.two span{
		font-size: 30rpx;
		font-weight: bold;
	}
	.three span{
		color: #8f8f8f;
	}
	.starts{
		display: inline-block;
	}
	.starts image{
		width: 25rpx;
		height: 25rpx;
		margin-left: 15rpx;
	}
	
	/* 空状态样式 */
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		background: #ffffff;
		border-radius: 30rpx;
		margin-top: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}
	
	.empty-text {
		font-size: 30rpx;
		color: #999999;
	}
	
	/* 初始加载动画样式 */
	.initial-loading {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		background: #ffffff;
		border-radius: 30rpx;
		margin-top: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}
	
	.loading-text {
		font-size: 32rpx;
		color: #3284fc;
	}
</style>